<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>商品信息</title>

  <style>
    .el-table .warning-row {
      background: oldlace;
    }

    .el-table .success-row {
      background: #f0f9eb;
    }
    .el-aside {
      color: #333;
    }
  </style>
</head>
<body>
<div id="app">

  <!--  表单-->

  <el-form :inline="true" :model="brand" class="demo-form-inline">
    <el-form-item label="当前状态">
      <el-select v-model="brand.status" placeholder="当前状态">
        <el-option label="启用" value="1"></el-option>
        <el-option label="禁用" value="0"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="企业名称">
      <el-input v-model="brand.companyName" placeholder="企业名称"></el-input>
    </el-form-item>
    <el-form-item label="品牌名称">
      <el-input v-model="brand.brandName" placeholder="品牌名称"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">查询</el-button>
    </el-form-item>
  </el-form>



  <!--  增加批量删除按钮-->
  <el-row>
    <el-button type="danger" plain @click="deleteByIds">删除</el-button>
    <el-button type="primary" @click="dialogVisible = true" plain>增加</el-button>

    <el-dialog
        title="编辑品牌"
        :visible.sync="dialogVisible"
        width="30%"
    >
      <span><el-form ref="form" :model="brand" label-width="80px">
  <el-form-item label="品牌名称">
    <el-input v-model="brand.brandName"></el-input>
  </el-form-item>
  <el-form-item label="企业名称">
    <el-input v-model="brand.companyName"></el-input>
  </el-form-item>
  <el-form-item label="排序">
    <el-input v-model="brand.ordered"></el-input>
  </el-form-item>
  <el-form-item label="备注">
    <el-input type="textarea" v-model="brand.description"></el-input>
  </el-form-item>
   <el-form-item label="状态">
    <el-switch v-model="brand.status"
               active-value='1'
               inactive-value='0'
    ></el-switch>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="addBrand">提交</el-button>
    <el-button @click="dialogVisible = false">取消</el-button>
  </el-form-item>
</el-form></span>
    </el-dialog>
  </el-row>


  <!--  表格数据-->
  <template>
    <el-table
        :data="tableData"
        style="width: 100%"
        :row-class-name="tableRowClassName"
        @selection-change="handleSelectionChange"
    >
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column
          type="index"
          width="50">
      </el-table-column>
      <el-table-column
          prop="brandName"
          label="品牌名称"
          align="center"
      >
      </el-table-column>
      <el-table-column
          prop="companyName"
          label="企业名称"
          align="center"
      >
      </el-table-column>
      <el-table-column
          prop="ordered"
          align="center"
          label="排序">
      </el-table-column>
      <el-table-column
          prop="status"
          align="center"
          label="当前状态">
      </el-table-column>
      <el-table-column
          align="center"
          label="操作">
        <template slot-scope="scope">
          <el-button type="primary" @click="lookHandle(scope.row)">修改</el-button>
          <el-button type="danger" @click.native.prevent="deleteRow(scope.$index, tableData)">删除</el-button>

          <el-dialog
              title="修改品牌"
              :visible.sync="centerDialogVisible"
              width="30%"
          >
      <span><el-form ref="lookForm" :model="lookForm" label-width="80px">
  <el-form-item label="品牌名称">
    <el-input v-model="lookForm.brandName"></el-input>

  </el-form-item>
  <el-form-item label="企业名称">
    <el-input v-model="lookForm.companyName"></el-input>

  </el-form-item>
  <el-form-item label="排序">
    <el-input v-model="lookForm.ordered"></el-input>
  </el-form-item>
  <el-form-item label="备注">
    <el-input type="textarea" v-model="lookForm.description"></el-input>
  </el-form-item>
   <el-form-item label="状态">
    <el-switch v-model="lookForm.status"
               :active-value='1'
               :inactive-value='0'
               center></el-switch>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="updateBrand">提交</el-button>
    <el-button @click="centerDialogVisible = false">取消</el-button>
  </el-form-item>
</el-form></span>
          </el-dialog>
        </template>
      </el-table-column>
    </el-table>
  </template>
  <!--分页-->
  <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalCount">
  </el-pagination>


</div>

<script src="js/axios.js"></script>
<script src="js/vue.js"></script>
<script src="js/element-ui/lib/index.js"></script>

<link rel="stylesheet" href="js/element-ui/lib/theme-chalk/index.css">

<script>

  new Vue({
    el: "#app",
    // 页面加载完成后，发送异步请求，查询数据
    mounted() {
      this.selectAll();

    },
    methods: {
      //查询所有商品
      selectAll() {
        var _this = this;
        // axios({
        //   method: "get",
        //   url: "http://localhost:8080/element/brand/selectAll"
        // }).then(function (resp) {
        //   _this.tableData = resp.data;
        // })
        // axios({
        //   method: "get",
        //   url: "http://localhost:8080/element/brand/selectByPage?currentPage="+_this.currentPage+"&pageSize="+_this.pageSize
        // }).then(function (resp) {
        //   _this.tableData = resp.data.rows;
        //   console.log(_this.tableData)
        // })
        axios({
          method:"post",
          url:"http://localhost:8080/element/brand/selectByPageAndCondition?currentPage="+this.currentPage+"&pageSize="+this.pageSize,

          data:this.brand
        }).then(resp =>{
          //设置表格数据
          this.tableData = resp.data.rows; // {rows:[],totalCount:100}
          //设置总记录数
          this.totalCount = resp.data.totalCount;
        })
      },
      //分页方法

      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageSize = val;
        this.selectAll();
      },
      //页方法
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.currentPage = val;
        this.selectAll();
      }, handleSelectionChange(val) {
        this.multipleSelection = val;
        console.log(this.multipleSelection);
      },
      onSubmit() {
        console.log(this.brand);
        this.selectAll();
      },
      addBrand() {
        var _this = this;
        axios({
          method: "post",
          url: "http://localhost:8080/element/brand/add",
          data: _this.brand
        }).then(function (resp) {

          if (resp.data == "success") {
            _this.dialogVisible = false;
            _this.selectAll();

            _this.$message({
              showClose: true,
              message: '添加成功',
              type: 'success'
            });
          }
        })
      },
      deleteRow(index, rows) {
        console.log(rows[index]);
        //当前行数据
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          console.log(rows[index]);
          var _this = this;
          var b = rows[index];
          axios({
            method: "post",
            url: "http://localhost:8080/element/brand/deleteById",
            data:b
          }).then(function (resp) {
            if (resp.data == "success") {
              _this.selectAll();
              _this.$message({
                type: 'success',
                message: '删除成功!'
              });

              //后面完善 自定义方法实现
              //_this.rows.splice(_this.index, 1);
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      lookHandle(row){
        this.centerDialogVisible = true;

        console.log(row)
        this.lookForm = row;
      },
      updateBrand(){
        var _this = this;
        console.log(_this.lookForm);
        axios({
          method: "post",
          url: "http://localhost:8080/element/brand/update",
          data: _this.lookForm
        }).then(function (resp) {

          if (resp.data == "success") {
            _this.centerDialogVisible = false;
            _this.selectAll();

            _this.$message({
              showClose: true,
              message: '修改成功',
              type: 'success'
            });
          }
        })
      },
      deleteByIds(){



        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          for (let i = 0; i < this.multipleSelection.length; i++) {
            let selectionElement = this.multipleSelection[i];
            this.selectIds[i] = selectionElement.id;
          }

          var _this = this;
          axios({
            method: "post",
            url: "http://localhost:8080/element/brand/deleteByIds",
            data: _this.selectIds
          }).then(function (resp) {

            if (resp.data == "success") {
              _this.selectAll();

              _this.$message({
                showClose: true,
                message: '批量删除成功',
                type: 'success'
              });
            }
          })

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }
    },
    data() {

      return {
        //增加按钮的对话框
        dialogVisible: false,
        centerDialogVisible: false,
        //表单数据
        brand: {
          id: '',
          brandName: '',
          companyName: '',
          ordered: '',
          description: '',
          status: ''
        },
        lookForm: {
          id: '',
          brandName: '',
          companyName: '',
          ordered: '',
          description: '',
          status: ''
        },
        //复选框数据
        selectIds:[],
        //复选框提交
        multipleSelection: [],
        // 每页显示的条数
        pageSize:5,
        // 总记录数
        totalCount:100,
        // 当前页码
        currentPage: 1,
        //商品模型(json)
        tableData: [{
          brandName: '',
          companyName: '',
          ordered: '',
          status: ""
        }]
      }
    }
  })
</script>
</body>
</html>